<template>
  <div class="layout-wrapper">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo-title">
          <img alt="" src="@/assets/imgs/logo.png" class="logo" />
          <div class="title">MinGateWay</div>
        </div>
        <div class="collapse-button" @click="toggleCollapse">
          <el-icon :size="20">
            <component :is="isCollapsed ? 'Expand' : 'Fold'" />
          </el-icon>
        </div>
      </div>
    </el-header>

    <!-- 主布局容器 -->
    <div class="main-container">
      <!-- 侧边栏 -->
      <el-aside class="sidebar" :width="isCollapsed ? '64px' : '240px'">
        <el-menu
            :default-active="router.currentRoute.value.path"
            mode="vertical"
            class="sidebar-menu"
            router
            :collapse="isCollapsed"
            :collapse-transition="true"
        >
          <el-tooltip
              v-for="item in menuItems"
              :key="item.index"
              :content="item.title"
              placement="right"
              :disabled="!isCollapsed"
          >
            <el-menu-item :index="item.index" @click="handleMenuItemClick(item)">
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-tooltip>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";
import {
  HomeFilled,
  Menu,
  Notebook,
  DataLine,
  Expand,
  Fold
} from "@element-plus/icons-vue";

const isCollapsed = ref(false);
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 菜单项数据
const menuItems = [
  {
    index: "/controller/route",
    title: "路由管理",
    icon: "Menu"
  },
  {
    index: "/controller/requestLog",
    title: "网关请求日志",
    icon: "Notebook"
  },
  {
    index: "/controller/traffic",
    title: "流量统计",
    icon: "DataLine"
  },
  {
    index: "/",
    title: "返回首页",
    icon: "HomeFilled"
  }
];

const handleMenuItemClick = (item) => {
  // 如果是折叠状态且点击的是当前激活项，则展开菜单
  if (isCollapsed.value && router.currentRoute.value.path === item.index) {
    isCollapsed.value = false;
  }
};

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
});


const logout = () => {
  ElMessage.success('退出成功');
  localStorage.removeItem('system-user');
  router.push('/');
};
</script>

<style scoped lang="scss">
/* 基础布局设置 */
.layout-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.header {
  height: 60px;
  background-color: #1f2d3d;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.header-content {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-title {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.title {
  font-weight: 600;
  font-size: 20px;
  margin-left: 12px;
  white-space: nowrap;
}

.collapse-button {
  cursor: pointer;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 4px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* 主容器样式 */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #263445;
  height: 100%;
  overflow-y: auto;
  transition: width 0.3s ease;
}

.sidebar-menu {
  width: 100%;
  border-right: none;
  height: 100%;
  background-color: transparent;

  &:not(.el-menu--collapse) {
    width: 240px;
  }

  .el-menu-item {
    color: #bfcbd9;
    height: 56px;
    line-height: 56px;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: #fff;
    }

    &.is-active {
      background-color: rgba(0, 146, 255, 0.15) !important;
      color: #409eff;
      border-right: 3px solid #409eff;
    }

    .el-icon {
      font-size: 18px;
      margin-right: 5px;
    }
  }
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
  height: calc(100vh - 60px);
  transition: all 0.3s;
}

/* 自定义tooltip样式 */
:deep(.el-tooltip__trigger) {
  width: 100%;
}

:deep(.el-tooltip__popper) {
  background-color: #1f2d3d !important;
  color: #fff !important;
  font-size: 14px;
  padding: 8px 12px !important;

  .popper__arrow {
    border-right-color: #1f2d3d !important;

    &::after {
      border-right-color: #1f2d3d !important;
    }
  }
}
</style>